<!-- 选择收货地址 -->
<template>
    <div class="address-container">
        <!--<cube-popup type="my-popup" ref="success-notice" v-show="showSuccess">
            <div class="active-ct">
                <div class="content" :class="{'diamond': type == 1, 'star': type == 2, 'crown': type == 3}">
                    <h3><img src="~assets/images/dealer/lineleft.png" /><span>升级成功</span><img src="~assets/images/dealer/lineright.png" /></h3>
                    <div class="success-wrapper">
                        <div class="success-img">
                            <img src="~assets/images/dealer/diamond.png" v-if="type == 1" />
                            <img src="~assets/images/dealer/star.png" v-if="type == 2" />
                            <img src="~assets/images/dealer/crown.png" v-if="type == 3" />
                        </div>
                        <div class="success-text">
                            <h4 v-if="type == 1">恭喜您,成为钻石会员经销商</h4>
                            <h4 v-if="type == 2">恭喜您,升级为星耀会员经销商</h4>
                            <h4 v-if="type == 3">恭喜您,成为王者会员经销商</h4>
                            <p>剩余时长：{{leftDay}}天</p>
                        </div>
                        <div class="close-btn">
                            <img @click="closeSuccessModal" src="~assets/images/dealer/confirm.png" />
                        </div>
                    </div>
                </div>
            </div>
        </cube-popup>-->
        <div class="dealer-info">
            <div class="dealer-wrapper" :class="{'diamond-dealer': type == 1, 'star-dealer': type == 2, 'crown-dealer': type == 3}">
                <div class="logo">
                    <img src="~assets/images/dealer/diamond.png" v-if="type == 1" />
                    <img src="~assets/images/dealer/star.png" v-if="type == 2" />
                    <img src="~assets/images/dealer/crown.png" v-if="type == 3" />
                </div>
                <div class="title">
                    <h2><strong>{{type == 1 ? '钻石会员经销商' : type == 2 ? '星耀会员经销商' : '王者会员经销商'}}</strong><!--<span class="diamond">&nbsp;经销商法则</span>--></h2>
                    <p>剩余时长：{{leftDay}}天</p>
                </div>
            </div>
            <div class="exchange-wrapper">
                <h3><img src="~assets/images/dealer/lineleft1.png" /><span>{{monthNum}}个月金至尊会员码兑换</span><img src="~assets/images/dealer/lineright1.png" /></h3>
                <div class="exchange-container">
                    <div class="exchange-content" v-for="(item, index) in packageList" :key="index" @click="chooseDifferentPurchase(index, item.packageId)">
                        <h2><span>{{item.unitPrice}}</span>CVNT/个</h2>
                        <h4>生成 {{item.num}} 个升级码</h4>
                        <p>共需缴纳{{item.totalPrice}}CVNT</p>
                    </div>
                    <!--<div class="exchange-content" @click="chooseDifferentPurchase(1)">
                        <h2><span>120</span>CVNT/个</h2>
                        <h4>生成 60 个升级码</h4>
                        <p>共需缴纳7200CVNT</p>
                    </div>
                    <div class="exchange-content" @click="chooseDifferentPurchase(2)">
                        <h2><span>160</span>CVNT/个</h2>
                        <h4>生成 20 个升级码</h4>
                        <p>共需缴纳3200CVNT</p>
                    </div>
                    <div class="exchange-content" @click="chooseDifferentPurchase(3)">
                        <h2><span>200</span>CVNT/个</h2>
                        <h4>生成 1 个升级码</h4>
                        <p>共需缴纳200CVNT</p>
                    </div>-->
                </div>
                <div class="exchange-notice">
                    <h5>*成功生成的会员码需在360天内使用</h5>
                </div>
            </div>
        </div>
        <!--支付相关弹框-->
        <div class="mask" v-show="showMask" @click="closeMask($event)">
            <div ref="maskContent">
                <transition name="fade">
                    <div class="general-height shopping-detail" v-if="showShopping">
                        <h3 class="title">支付详情</h3>
                        <div class="content">
                            <h2><span>{{shoppingDetail.cvnt}}</span> CVNT</h2>
                            <p><span>当前会员经销商等级</span><strong>{{shoppingDetail.level}}</strong></p>
                            <p><span>兑换金至尊会员码类别</span><strong>{{shoppingDetail.codeType}}</strong></p>
                            <p><span>兑换数量</span><strong>{{shoppingDetail.number}}个</strong></p>
                            <p><span>计算币价汇率时间</span><strong>{{shoppingDetail.time}}</strong></p>
                            <p><span>换算后兑换单价</span><strong>{{shoppingDetail.unitPrice}}CVNT/个</strong></p>
                        </div>
                        <div class="pay-btn">
                            <p @click.stop.prevent="confirmToPay">请确保以上信息无误，在<span style="color:#FFAC75;"> {{countdown}} </span>秒内完成支付</p>
                        </div>
                    </div>
                </transition>
                <div class="general-height pay-password" v-if="showPay">
                    <h3 class="title">请在 <span style="color:#FF6A08;"> {{countdown}} </span> 秒内输入支付密码完成支付</h3>
                    <div class="password-wrapper">
                        <span><strong v-if="password.num1 >= 0"></strong></span>
                        <span><strong v-if="password.num2 >= 0"></strong></span>
                        <span><strong v-if="password.num3 >= 0"></strong></span>
                        <span><strong v-if="password.num4 >= 0"></strong></span>
                        <span><strong v-if="password.num5 >= 0"></strong></span>
                        <span><strong v-if="password.num6 >= 0"></strong></span>
                    </div>
                    <!--<div class="forget-password" @click="getPwd">忘记密码?</div>-->
                    <div class="number-group">
                        <div class="number-btn">
                            <div @click.stop.prevent="chooseNum(1)">1</div><div @click.stop.prevent="chooseNum(2)">2</div><div @click.stop.prevent="chooseNum(3)">3</div>
                        </div>
                        <div class="number-btn">
                            <div @click.stop.prevent="chooseNum(4)">4</div><div @click.stop.prevent="chooseNum(5)">5</div><div @click.stop.prevent="chooseNum(6)">6</div>
                        </div>
                        <div class="number-btn">
                            <div @click.stop.prevent="chooseNum(7)">7</div><div @click.stop.prevent="chooseNum(8)">8</div><div @click.stop.prevent="chooseNum(9)">9</div>
                        </div>
                        <div class="number-btn">
                            <div class="no-num"></div><div @click.stop.prevent="chooseNum(0)">0</div><div class="no-num" @click.stop.prevent="deletePwd"><img src="~assets/images/del.png" /></div>
                        </div>
                    </div>
                    <div class="pay-loading" v-show="showPayLoading">
                        <div class="paying">
                            <img src="~assets/images/paying.gif" />
                            <span>正在支付</span>
                        </div>
                    </div>
                </div>
                <!--<div class="general-height id-check" v-if="showIdCheck">
                    <h3 class="title check-title"><img @click.stop.prevent="close" src="~assets/images/close.png" />身份验证</h3>
                    <div class="check-content">
                        <p>需要通过绑定的手机 {{starPhone}}</p>
                        <p>进行身份验证以确保账户的资金安全</p>
                        <div class="sms-input">
                            <input placeholder="请输入接收到的验证码" type="number" v-model="verificationCode" /><span @click.stop.prevent="getVerifyCode" style="background:rgba(23,62,143,1);" v-if="showFlag">发送验证码</span><span v-else>重新发送 {{countdown}}s</span>
                        </div>
                        <h4 @click.stop.prevent="finishVerification" class="finish-btn" :class="{'success': verificationCode.length == 4}">完成验证</h4>
                    </div>
                    &lt;!&ndash;<div class="pay-loading" v-show="showPayLoading">
                        <div class="paying">
                            <img src="~assets/images/paying.gif" />
                            <span>正在支付</span>
                        </div>
                    </div>&ndash;&gt;
                </div>-->
                <div class="general-height shopping-detail" v-if="showResult">
                    <h3 class="title">支付结果</h3>
                    <div class="result">
                        <img src="~assets/images/dealer/success.png" />
                        <h3>金至尊会员升级码兑换成功</h3>
                        <p>1分钟后可在“我的升级码”中查看</p>
                    </div>
                    <div class="pay-btn">
                        <p @click.stop.prevent="goBackToDealer">返回金至尊会员经销商</p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
  import bridge from 'common/js/bridge'
  import md5 from 'js-md5';
  import 'common/js/gt'

  import {agentInfo, packageList, exchangeStepOne, exchangeStepTwo, checkAgentPayPassword } from 'api/register'
  export default {
    props: [],
    components: {

    },
    data () {
      return {
        type: 1,
        monthNum: 1,
        leftDay: 312,
        showSuccess: false,
        isShow: false,
        showEdit: false,
        isIOS: false,
        uid: localStorage.getItem('uid') || window['uid'],
        token: window['token'],
        scene: 'transfer',
        current: 0,
        packageList: [],
        showShopping: false,
        shoppingDetail: {
          cvnt: 5000,
          level: '钻石会员经销商',
          codeType: '',
          number: 312,
          time: '2019年5月8日 18:26:31',
          unitPrice: '',
          expireSec: 60,
          orderNo: ''
        },
        showPay: false,
        payPwd: '',
        password: {
          num1: -1,
          num2: -1,
          num3: -1,
          num4: -1,
          num5: -1,
          num6: -1
        },
        showPayLoading: false,
        showIdCheck: false,
        verificationCode: '',
        showFlag: true,
        countdown: 60,
        showResult: false,
        showMask: false,
        payPassword: '',
        sign: '',
        positionFlag: true,
        payStatus: 1,
        setIntervalCountdownTime: 1000,
        goodsId: 0,
        codeExpire: 360,
        packageId: 0,
        dealerLevel: '',
        u: ''
      }
    },
    beforeRouteEnter(to, from, next) {
      next((vm) => {
        let query = to.query;
        Object.assign(vm, query);
        vm.uid = query.uid;
        vm.token = query.token;
        vm.monthNum = query.monthNum;
        vm.goodsId = query.goodsId;
        vm.getAgentInfo();
        vm.getPackageList();
        /*vm.shoppingDetail = {
          cvnt: query.cvnt,
          name: query.name,
          num: query.num,
          unit: '台'
        };*/
        // vm.getUserAddress();
        // vm.getRegister_ini();
      })
    },
    created() {
      this.detectOS();
    },
    mounted(){
      // this.getUserAddress();
      // window.addEventListener('scroll', this.handleScroll);
    },
    computed: {


    },
    watch: {
      'password.num6': {
        handler(newVal, oldVal) {
          if (newVal >= 0 && this.payPwd.length == 6) {
            // console.log(this.payPwd);
            this.payPassword = md5(this.payPwd);
            // console.log(this.payPassword);
            setTimeout(() => {
              this.verifyPayPassword();
            }, 50);
          }
        },
        immediate: true,
        deep: true
      }/*,
      countdown: {
        handler(newVal, oldVal) {
          if (newVal <= 1) {
            this.cancelSetIntervalCountdown();
            this.countdown = 60;
            this.showMask = false;
            this.showPay = false;
          }
        }
      }*/
    },
    beforeDestroy() {
      let setIntervalCountdown = window['setIntervalCountdown'];
      clearInterval(setIntervalCountdown);
      window['setIntervalCountdown'] = null;
    },
    methods: {
      /*startCountDown() {
        this.showFlag = false;
        let time = setInterval(() => {
          this.countdown--;
          if (this.countdown <= 0) {
            clearInterval(time);
            this.showFlag = true;
            this.countdown = 60;
          }
        }, 1000);
      },*/
      getAgentInfo() {
        agentInfo().then((data) => {

          if (data.status && data.status == 1) {
            this.type = data.data.level;
            if (data.data.level == 1) {
              this.dealerLevel = '钻石会员经销商';
            } else if (data.data.level == 2) {
              this.dealerLevel = '星耀会员经销商';
            } else if (data.data.level == 3) {
              this.dealerLevel = '王者会员经销商';
            }
            this.leftDay = data.data.remainingTime;
          }
        }).catch((err) => {
            this.showToast(err.info, 'warn');
        })
      },
      getPackageList() {
        packageList(this.goodsId).then((data) => {

          if (data.status && data.status == 1) {
            // this.codeExpire = data.data.codeExpire;
            if (data.data.package && data.data.package.length > 0) {
              this.packageList = data.data.package;
            }
          }
        }).catch((err) => {
          this.showToast(err.info, 'warn');
        })
      },
      startSetIntervalCountdown() {
        let setIntervalCountdown = window['setIntervalCountdown'];
        if (setIntervalCountdown) {
          clearInterval(setIntervalCountdown);
          window['setIntervalCountdown'] = null;
        }
        window['setIntervalCountdown'] = setInterval(() => {

          this.countdown--;

          if (this.countdown <= 0) {
            this.cancelSetIntervalCountdown();
            this.countdown = 60;
            this.showMask = false;
            this.showPay = false;
            /*关闭这个对话框时将当前已经输入的支付密码清空*/
            this.password = {
              num1: -1,
              num2: -1,
              num3: -1,
              num4: -1,
              num5: -1,
              num6: -1
            };
            this.payPwd = '';
            this.payPassword = '';
          }

        }, 1000);/*this.setIntervalCountdownTime*/
      },
      cancelSetIntervalCountdown() {
        let setIntervalCountdown = window['setIntervalCountdown'];
        clearInterval(setIntervalCountdown);
        window['setIntervalCountdown'] = null;
      },
      detectOS() {
        let u = navigator.userAgent;
        // console.log(u);
        this.isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        // console.log(this.isIOS);
      },
      chooseMonthNumber(val) {
        this.monthNum = val;
      },
      chooseDifferentPurchase(val, id) {
        this.countdown = 60;
        this.cancelSetIntervalCountdown();
        this.packageId = id;
        this.commitExchangeStepOne();
      },

      commitExchangeStepOne() {
        exchangeStepOne({packageId: this.packageId}).then((data) => {

          if (data.status && data.status == 1) {
            this.shoppingDetail = {
              cvnt: data.data.totalPrice,
              level: this.dealerLevel,
              codeType: data.data.goodsName,
              number: data.data.num,
              time: data.data.createTime,
              unitPrice: data.data.unitPrice,
              expireSec: data.data.expireSec,
              orderNo: data.data.orderNo
            };

            this.showMask = true;
            this.showShopping = true;

            this.startSetIntervalCountdown();

          }
        }).catch((err) => {
            this.showToast(err.info, 'warn');
        });
      },
      verifyPayPassword() {
        this.showPayLoading = true;
        checkAgentPayPassword({uid: this.uid, password: this.payPassword}).then((data) => {
          this.u = data.data.u;

          if (data.status && data.status == 1) {
            /*setTimeout(() => {
              const toast = this.$createToast({
                time: 1000,
                txt: '支付密码验证成功',
                type: 'correct'
              });
              toast.show();
            }, 500);*/
            setTimeout(() => {
              this.showPayLoading = false;
              this.showPay = false;
              // this.showMask = false;
              this.commitExchangeStepTwo();
            }, 500);
          }
        }).catch((error) => {

          if (error.status && error.status != 1) {
            setTimeout(() => {
              this.showToast(error.info, 'warn');
            }, 500)
          }
          setTimeout(() => {
            this.showPayLoading = false;
          }, 500)

        })
        /*验证支付密码成功或者失败后将当前已经输入的支付密码清空*/
        this.password = {
          num1: -1,
          num2: -1,
          num3: -1,
          num4: -1,
          num5: -1,
          num6: -1
        };
        this.payPwd = '';
        this.payPassword = '';
      },
      commitExchangeStepTwo() {
        exchangeStepTwo({orderNo: this.shoppingDetail.orderNo, u: this.u}).then((data) => {

          if (data.status && data.status == 1) {
            // this.showToast(data.info, 'correct');
            this.countdown = 60;
            this.cancelSetIntervalCountdown();
            this.showResult = true;
          }
        }).catch((error) => {
          if (error.status && error.status != 1) {
            setTimeout(() => {
              this.showMask = false;
              this.countdown = 60;
              this.cancelSetIntervalCountdown();
              this.showToast(error.info, 'warn');
            }, 500);
          }
        })
      },

      getPwd(){
        // alert(11)
        bridge.forgetPwd()
      },
      showToast(msg, type) {
        const toast = this.$createToast({
          time: 2000,
          txt: msg,
          type: type
        });
        toast.show();
      },
      close() {
        this.showMask = false;
      },
      forget() {

      },
      inputEnd() {

      },
      chooseNum(val) {
        // console.log(this.payPwd.length);
        if (this.payPwd.length == 0) {
          this.password.num1 = val;
          this.payPwd += val;
        } else if (this.payPwd.length == 1) {
          this.password.num2 = val;
          this.payPwd += val;
        } else if (this.payPwd.length == 2) {
          this.password.num3 = val;
          this.payPwd += val;
        } else if (this.payPwd.length == 3) {
          this.password.num4 = val;
          this.payPwd += val;
        } else if (this.payPwd.length == 4) {
          this.password.num5 = val;
          this.payPwd += val;
        } else if (this.payPwd.length == 5) {
          this.password.num6 = val;
          this.payPwd += val;
        }
        // console.log(this.payPwd);
      },
      deletePwd() {
        // console.log(this.payPwd.length);
        if (this.payPwd.length == 0) {
          return;
        } else if (this.payPwd.length == 1) {
          this.password.num1 = -1;
          this.payPwd = '';
        } else if (this.payPwd.length == 2) {
          this.password.num2 = -1;
          this.payPwd = this.payPwd.substring(0, this.payPwd.length - 1)
        } else if (this.payPwd.length == 3) {
          this.password.num3 = -1;
          this.payPwd = this.payPwd.substring(0, this.payPwd.length - 1)
        } else if (this.payPwd.length == 4) {
          this.password.num4 = -1;
          this.payPwd = this.payPwd.substring(0, this.payPwd.length - 1)
        } else if (this.payPwd.length == 5) {
          this.password.num5 = -1;
          this.payPwd = this.payPwd.substring(0, this.payPwd.length - 1)
        } else if (this.payPwd.length == 6) {
          this.password.num6 = -1;
          this.payPwd = this.payPwd.substring(0, this.payPwd.length - 1)
        }
        // console.log(this.payPwd);
      },

      closeMask(ev) {
        if (!this.$refs.maskContent.contains(ev.target)) {
          this.showMask = false;
          this.showShopping = false;
          this.showResult = false;

          if (this.payStatus == 2) {
            this.payStatus = 1;  //  payStatus:1,表示当前处于选择不同会员经销商，payStatus:2，表示当前处于支付弹框状态
            this.showPay = false;
          }
        }

        /*切换时将当前已经输入的支付密码清空*/
        this.password = {
          num1: -1,
          num2: -1,
          num3: -1,
          num4: -1,
          num5: -1,
          num6: -1
        };
        this.payPwd = '';
        this.payPassword = '';
        this.countdown = 60;
        this.cancelSetIntervalCountdown();
      },
      closeSuccessModal() {
        this.showSuccess = false;
        this.showMask = true;
        this.showEdit = true;
        // this.$refs['success-notice'].hide();
      },
      confirmToEdit() {

      },
      confirmToPay() {
        this.payStatus = 2;  //  payStatus:1,表示当前处于选择不同会员经销商，payStatus:2，表示当前处于支付弹框状态
        this.showShopping = false;
        this.showPay = true;
        // this.startSetIntervalCountdown();
      },
      finishVerification() {
        if (this.verificationCode == '') {
          this.showToast('请输入短信验证码', 'warn');
          return;
        }
        if (this.isSubmiting) {
          return;
        }

        checkSMSCode(this.verificationCode).then((data) => {
          if (data.status && data.status == 1) {
            this.isSubmiting = true;
            let postData = {
              uid: this.uid,
              token: this.shopToken,
              gid: this.gid,
              num: this.shoppingDetail.num,
              addr_id: this.addrId,
              coin_type: this.coinType
            };
            submitOrder(postData).then((data) => {
              this.showToast('下单成功！', 'correct');
              this.showIdCheck = false;
              this.showResult = true;
              this.verificationCode = '';
              this.isSubmiting = false;
            }).catch((err) => {
              this.isSubmiting = false;
              this.showToast(err.info, 'warn');
            })
          }
        }).catch((err) => {
          this.verificationCode = '';
          this.showToast(err.info, 'warn');
        })
      },
      goBackToDealer() {
        this.showMask = false;
        this.showShopping = false;
        this.showPay = false;
        this.showResult = false;
        this.$router.push({path: '/dealer', query: {
            uid: this.uid,
            token: this.token
          }
        });
        /*if (this.isIOS) {
          this.$router.push({path: '/dealer', query: {
            uid: this.uid,
            token: this.token
           }
          });
        } else {
          bridge.goBackShopping();
        }*/

        /*this.$router.push({path: 'goodsList', query: {

          }
        });*/
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import 'common/scss/index.scss';
  body,html{
    height:100%;
  }
  .address-container{
    /*height:calc(100% - 88px);*/
    position:relative;
    height:100%;
    background:#30344D;
    overflow-y:auto;
    /*overflow:hidden;*/
  }
  .dealer-info{
    padding-top:30px;
    background:#30344D;
  }
  .dealer-wrapper{
    position:relative;
    z-index:999;
    display:flex;
    justify-content:space-between;
    width:92%;
    height:270px;
    border-radius:14px;
    margin:0 30px 0;
    color:#fff;
    .title{
      width:70.99999%;
      // text-align:center;
      h2{
        display:flex;
        justify-content:space-between;
        align-items:center;
        margin:40px 0 23px;
        strong{
          font-size:36px;
          font-weight:600;
          color:#FFF;
        }
        span{
          width:144px;
          height:50px;
          text-align:center;
          line-height:50px;
          border-radius:25px 0 0 25px;
          font-size:20px;
        }
        .diamond{
          background:rgba(139,143,186,1);
        }
        .star{
          background:rgba(184,131,58,1);
        }
        .crown{
          background:rgba(145,127,198,1);
        }
      }
      p{
        font-size:28px;
        color:#fff;
        opacity:0.6;
      }
      .upgrade-btn{
        width:178px;
        height:54px;
        line-height:54px;
        margin-top:30px;
        text-align:center;
        background:linear-gradient(-90deg,rgba(87,90,133,1),rgba(37,47,74,1));
        border-radius:27px;
        color:#FCE2AE;
        font-size:24px;
      }
    }
    .logo{
      width:28.99999%;
      text-align:center;
      img{
        width:156px;
        height:172px;
        margin-top:38px;
      }
    }
  }
  .diamond-dealer{
    background: url("~assets/images/dealer/diamondbg1.png") no-repeat center center;
    background-size: contain;
  }
  .star-dealer{
    background: url("~assets/images/dealer/starbg1.png") no-repeat center center;
    background-size: contain;
  }
  .crown-dealer{
    background: url("~assets/images/dealer/crownbg1.png") no-repeat center center;
    background-size: contain;
  }

  .exchange-wrapper{
    margin:-34px 30px 0;
    padding:0 0 42px;
    background:#575A85;
    >h3{
      margin-bottom:41px;
      text-align:center;
      img{
        vertical-align:middle;
        width:93px;
        height:18px;
      }
      span{
        display:inline-block;
        margin:41px 20px 0;
        font-size:36px;
        font-weight:500;
        color:#FBE1AE;
        text-shadow:0 2px 2px rgba(51,51,51,0.3);
      }
    }
    .exchange-container{
      padding:0 40px;
      text-align:center;
      .exchange-content{
        margin-bottom:32px;
        padding:28px 0 17px;
        background:linear-gradient(-90deg,rgba(247,224,172,1),rgba(255,242,213,1));
        border-radius:12px;
        h2{
          color:#A47D53;
          font-size:24px;
          span{
            font-size:60px;
          }
        }
        h4{
          width:400px;
          margin:20px auto 18px;
          line-height:56px;
          height:56px;
          background:linear-gradient(-90deg,rgba(190,145,70,1),rgba(231,198,135,1));
          border-radius:28px;
          color:#5B3301;
        }
        p{
          font-size:24px;
          color:#A47D53;
        }
      }
      .exchange-content:last-child{
        margin-bottom:0;
      }
    }
    .exchange-notice{
      margin-top:43px;
      h5{
        text-align:center;
        font-size:24px;
        color:#FBE1AE;
      }
    }
  }


  .upgrade-container{
    margin:-34px 30px 0;
    padding:50px 0 84px;
    background:#575A85;
  }
  .upgrade-wrapper{
    display:flex;
    justify-content:space-between;
    width:630px;
    height:140px;
    border-radius:14px;
    margin:84px auto 0;
    color:#fff;
    .title{
      width:65.6666%;
      text-align:center;
      h2{
        margin:32px 0 16px;
        font-size:36px;
        font-weight:600;
      }
      p{
        font-size:28px;
      }
    }
    .logo{
      width:34.3333%;
      /*text-align:center;*/
      img{
        width:156px;
        height:172px;
        margin-top:28px;
      }
    }
  }
  .price-table{
    /*margin-top:12px;*/
    h3{
      position:relative;
      z-index:999;
      width:330px;
      height:66px;
      line-height:66px;
      margin:12px auto;
      text-align:center;
      color:rgba(255,231,176,1);
      span{
        display:inline-block;
        margin:2px 12px 0;
        font-size:30px;
        font-weight:500;
      }
      img{
        width:16px;
        height:16px;
      }
    }
  }
  .table-container{
    width:92%;
    margin:0 30px 30px;
    border:1px solid #A39886;
    .table-head{
      display:flex;
      align-items:center;
      font-size:22px;
      text-align:center;
      background:#30344D;
      color:#FFE7B0;
      >div{
        flex:1;
        display:flex;
        align-items:center;
        justify-content:center;
        height:72px;
        line-height:1.35;
        border-right:1px solid #A39886;
        border-bottom:1px solid #A39886;
      }
      >div:last-child{
        border-right:0;
      }
      .number-type{
        flex: 1.2;
      }
    }
    .table-body{
      display:flex;
      align-items:center;
      font-size:22px;
      text-align:center;
      color:#FFE7B0;
      >div{
        flex:1;
        height:214px;
        border-right:1px solid #A39886;
        border-bottom:1px solid #A39886;
        >div{
          display:flex;
          height:71px;
          align-items:center;
          justify-content:center;
          border-bottom:1px solid #A39886;
          p{
            line-height:1.3;
          }
        }
        >div:last-child{
          border-bottom:0;
        }
        img{
          display:block;
          width:80px;
          height:80px;
          margin:32px auto 23px;
        }
        h4{
          line-height:1.35;
        }
      }
      >div:last-child{
        border-right:0;
      }
      .number-type{
        flex: 1.2;
      }
    }
    .diamond{
      background:#AEB5DF;
    }
    .star{
      background:#DEB681;
    }
    .crown{
      background:#BCADE8;
    }
    >div:last-child{
      >div{
        border-bottom:0;
      }
    }
  }
  /*.diamond-dealer{
    background: url("~assets/images/dealer/diamondbg.png") no-repeat center center;
    background-size: contain;
  }*/
  .upgrade-star-dealer{
    margin:34px auto 0;
    background: url("~assets/images/dealer/starbg3.png") no-repeat center center;
    background-size: contain;
  }
  .upgrade-crown-dealer{
    background: url("~assets/images/dealer/crownbg3.png") no-repeat center center;
    background-size: contain;
  }
  .adjust-margin-top{
    margin:34px auto 0;
  }


  .member-container{
    width:92%;
    margin:-10px 30px 0;
    padding:0 24px 24px;
    background:#575A85;
    .price-wrapper{
      display:flex;
      .price-detail{
        width:30.99999%;
        margin-right:3.499999%;
        background:rgba(255,255,255,1);
        border:1px solid rgba(232,222,213,1);
        border-radius:8px;
        text-align:center;
        cursor:pointer;
        h4{
          margin:32px 0 18px;
          font-size:30px;
          color:#636363;
          font-weight:600;
        }
        h5{
          font-size:24px;
          color:#EBA74E;
          span{
            font-size:66px;
          }
        }
        p{
          font-size:24px;
          margin:9px 0 11px;
          color:#919191;
        }
        h6{
          height:54px;
          line-height:54px;
          font-size:24px;
          background:#FFF5E7;
          color:#836239;
        }
      }
      .selected{
        background:rgba(255,246,233,1);
        border:1px solid rgba(224,173,101,1);
        h4{
          color:#542B00;
        }
        h5{
          color:#EBA74E;
          span{

          }
        }
        p{
          color:#755125;
        }
        h6{
          background:linear-gradient(-90deg,rgba(245,212,153,1),rgba(230,182,113,1));
          color:#FFF;
        }
      }
      .price-detail:last-child{
        margin-right:0;
      }
    }
    .exchange-btn{
      width:100%;
      height:88px;
      line-height:88px;
      margin-top:24px;
      text-align:center;
      background:linear-gradient(-90deg,rgba(225,179,114,1) 0%,rgba(251,228,169,1) 100%);
      border-radius:44px;
      font-size:36px;
      font-weight:600;
      color:#5B3301;
      cursor:pointer;
    }
  }

  .go-outside-btn{
    display:flex;
    font-size:30px;
    padding:30px 0;
    background:#424459;
    color:#F2F2F8;
    >div{
      width:49.99999%;
      height:40px;
      line-height:40px;
      cursor:pointer;
      text-align:center;
    }
    >div:first-child{
      border-right:1px solid #8B8E9D;
    }
  }
  .contact-wrapper{
    padding:30px;
    background:#F5F5FB;
    .contact-container{
      background:rgba(255,255,255,1);
      box-shadow:0 1px 2px 0 rgba(10,29,87,0.2);
      border-radius:10px;
    }
    .contact-content{
      display:flex;
      height:88px;
      justify-content:space-between;
      align-items:center;
      padding:0 24px;
      border-bottom:1px solid #f5f5f5;
      h3{
        font-size:30px;
      }
      .able{
        color:#202C5B;
      }
      .disable{
        color:#D0D0D0;
      }

      .able-btn{
        width:120px;
        height:54px;
        line-height:54px;
        text-align:center;
        font-size:24px;
        color:#fff;
        background:rgba(23,62,143,1);
        border-radius:27px;
      }
      .edit-able{
        background:rgba(23,62,143,1);
      }
      .edit-disable{
        background:rgba(208,208,208,1);
      }
    }
    .contact-intro{
      padding:20px 42px 24px 24px;
      p{
        font-size:24px;
        line-height:1.75;
      }
      .able{
        color:#71768C;
      }
      .disable{
        color:#D0D0D0;
      }
    }
  }

  .active-ct {
    .content {
      margin: 0 auto;
      width: 77.0666vw;
      height: 87.7333vw;
      margin-bottom: 17px;
      -webkit-overflow-scrolling: touch;
      overflow: auto;
      //pointer-events: all;
      h3{
        text-align:center;
        img{
          vertical-align:middle;
          width:93px;
          height:18px;
        }
        span{
          display:inline-block;
          margin:41px 20px 0;
          font-size:36px;
          font-weight:500;
          color:rgba(255,255,255,1);
          text-shadow:0 2px 2px rgba(51,51,51,0.3);
        }
      }
      .success-wrapper{
        margin-top:94px;
        text-align:center;
        .success-img{
          img{
            width:156px;
            height:172px;
          }
        }
        .success-text{
          h4{
            margin:16px 0 15px;
            font-size:28px;
            color:#464850;
          }
          p{
            font-size:24px;
            color:#9292AA;
          }
        }
        .close-btn{
          img{
            width:370px;
            height:76px;
            margin-top:17px;
            cursor:pointer;
          }
        }
      }

    }
    .diamond{
      background: url("~assets/images/dealer/diamondbg2.png") no-repeat center center;
      background-size: contain;
    }
    .star{
      background: url("~assets/images/dealer/starbg2.png") no-repeat center center;
      background-size: contain;
    }
    .crown{
      background: url("~assets/images/dealer/crownbg2.png") no-repeat center center;
      background-size: contain;
    }
    .close {
      margin: 0 auto;
      width: 38px;
      height: 38px;
      background: url("~assets/images/close.png") no-repeat center center;
      background-size: contain;
    }
  }


  .selected{
    border:1px solid #173E8F;
    /*background:#fff url("~assets/images/choose1.png") no-repeat left top;*/
    background:#fff;
    /*background-size:34px 34px;*/
  }

  /*.next-step{
    position:fixed;
    z-index:9988;
    bottom:0;
    left:0;
    right:0;
    color:#fff;
    height:88px;
    line-height:88px;
    text-align:center;
    background:#173E8F;
    span{
      display:block;
      font-size:28px;
    }
  }*/
  .next-step{
    display:flex;
    color:#fff;
    height:88px;
    line-height:88px;
    align-items:center;
    background:#173E8F;
    span{
      display:block;
      width:100%;
      height:88px;
      line-height:88px;
      font-size:28px;
      text-align: center;
    }
  }
  .add-btn{
    height:150px;
    line-height:150px;
    border:1px solid rgba(201,204,220,1);
    border-radius:10px;
    margin:30px 26px 140px;
    text-align:center;
    color:#1253FC;
    /*padding:10px 0;*/
    img{
      display:inline-block;
      width:36px;
      height:36px;
      vertical-align:middle;
      margin-right:12px;
      margin-top:-2px;
    }
    span{
      display:inline-block;
      vertical-align:middle;
      font-size:30px;
    }
  }

  .mask{
    position:fixed;
    z-index:9991;
    height:100%;
    width:100%;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0, 0, 0, 0.5);

    .general-height{
      /*height: 500px;*/
      height: 67.46vh;
      background:rgba(255,255,255,1);
    }
    .title{
      padding:29px 0 28px;
      font-size:34px;
      border-bottom:1px solid rgba(245,245,245,1);
      color:#202C5B;
      text-align:center;
    }
    .number-group{
      position:absolute;
      z-index:9992;
      bottom:0;
      left:0;
      right:0;
      height:448px;
      >div:first-child{
        border-top:1px solid rgba(245,245,245,1);
      }
      .number-btn{
        display:flex;
        div{
          flex:1;
          height:111px;
          line-height:111px;
          font-size:50px;
          color:#333;
          text-align:center;
          border-bottom:1px solid rgba(245,245,245,1);
          border-right:1px solid rgba(245,245,245,1);
          -webkit-tap-highlight-color:rgba(0,0,0,0.15);
        }
        div:active{
          background:rgba(0,0,0,0.15);
        }
        div:last-child{
          border-right:none;
        }
        .no-num{
          background:#e3e7ee;
          img{
            width:44px;
            height:32px;
            display:block;
            margin:40px auto;
          }
        }
      }
    }
    .shopping-detail{
      position:fixed;
      width:100%;
      bottom:0;
      left:0;
      right:0;

      .content{
        margin:97px 30px 0;
        h2{
          margin-bottom:66px;
          text-align:center;
          font-size:30px;
          color:#202C5B;
          font-weight:600;
          span{
            font-size:72px;
          }
        }
        p{
          display:flex;
          justify-content:space-between;
          margin-top:30px;
          font-size:28px;
          padding-bottom:29px;
          border-bottom:1px solid #ececec;
          span{
            color:#71768C;
          }
          strong{
            color:#202C5B;
          }
        }
        /*p:last-child{
          margin-top:30px;
        }*/
        .wechat{
          input{
            display:block;
            width:100%;
            height:84px;
            line-height:84px;
            border:1px solid rgba(227,227,227,1);
            border-radius:8px;
            text-indent:22px;
            font-size:26px;
            box-shadow:0 0 0 rgba(0,0,0,0);
            -webkit-appearance:none;
            outline:none;
            background:#F6F7F8;
          }
        }
      }
      .result{
        margin-top:97px;
        text-align:center;
        img{
          width:80px;
          height:80px;
          margin-bottom:41px;
        }
        h3{
          margin-bottom:60px;
          font-size:28px;
          color:#202C5B;
        }
        p{
          font-size:28px;
          color:#71768C;
        }
      }
      .pay-btn{
        position:absolute;
        bottom:30px;
        height:84px;
        line-height:84px;
        text-align:center;
        background:rgba(23,62,143,1);
        border-radius:8px;
        color:#fff;
        width:calc(100% - 60px);
        margin:0 30px;
        font-size:32px;
      }
    }
    .pay-password{
      position:fixed;
      width:100%;
      bottom:0;
      left:0;
      right:0;
      .password-wrapper{
        display:flex;
        margin:43px 30px 0;
        height:88px;
        line-height:88px;
        border:1px solid rgba(209,209,209,1);
        border-radius:10px;
        span{
          flex:1;
          text-align:center;
          border-right:1px solid rgba(209,209,209,1);
          strong{
            display:block;
            width:20px;
            height:20px;
            border-radius:50%;
            background:#333;
            margin:34px auto;
          }
        }
        span:last-child{
          border-right:none;
        }
      }
      .forget-password{
        color:#1253FC;
        width:25%;
        padding:12px 0;
        margin:12px auto 0;
        text-align:center;
        font-size:28px;
      }
      .pay-loading{
        position:absolute;
        z-index:9993;
        bottom:0;
        left:0;
        right:0;
        height:calc(100% - 70px);
        background:#fff;
        .paying{
          position:absolute;
          left:50%;
          top:50%;
          transform:translate(-50%, -50%);
          text-align:center;
          font-size:30px;
          color:#4B74E8;
          img{
            display:block;
            width:40px;
            height:40px;
            margin:0 auto 15px;
          }
        }
      }

    }
    .id-check{
      position:fixed;
      width:100%;
      bottom:0;
      left:0;
      right:0;
      .check-title{
        position:relative;
        img{
          position:absolute;
          left:30px;
          top:29px;
          width:34px;
          height:34px;
        }
      }
      .check-content{
        margin-top:32px;
        padding:0 30px;
        p{
          text-align:center;
          color:#202C5B;
          font-size:26px;
          line-height:1.5;
        }
        .sms-input{
          height:84px;
          line-height:84px;
          margin-top:28px;
          input{
            display:inline-block;
            height:84px;
            line-height:84px;
            width:59.9999%;
            text-indent:22px;
            font-size:30px;
            border-radius:10px 0 0 10px;
            border:1px solid rgba(227,227,227,1);
            border-right:none;
            box-shadow:0 0 0 rgba(0,0,0,0);
            -webkit-appearance:none;
            outline:none;
            background:#F6F7F8;
          }
          span{
            display:inline-block;
            width:39.9999%;
            height:84px;
            line-height:84px;
            border-radius:0 10px 10px 0;
            vertical-align:top;
            background:#D1D1D1;
            color:#fff;
            font-size:30px;
            text-align:center;
            /*border:1px solid rgba(227,227,227,1);
            border-left:none;*/
          }
        }
        .finish-btn{
          height:84px;
          line-height:84px;
          margin-top:32px;
          text-align:center;
          color:#fff;
          font-size:34px;
          border-radius:8px;
          background:rgba(23,62,143,0.5);
        }
        .success{
          background:rgba(23,62,143,1);
        }
      }
    }
  }
  .fixed-position{
    position:fixed;
  }
  .static-position{
    position:absolute;
  }

  .fade-enter-active, .fade-leave-active{
    /*opacity:1;
    background: rgba(7, 17, 27, 0.8);*/
    transition: all 0.5s;
    transform:translate(0, 0);
  }
  .fade-enter, .fade-leave-active{
    /*opacity:0;
    background:rgba(7, 17, 27, 0);*/
    transform: translate(0, 100%);
  }
  input::-webkit-input-placeholder{
    color: #B7C3D1;
    font-size:26px;
  }
</style>
<style>
  .cube-toast-tip{
    /*max-width:13em;*/
    font-size:28px;
    max-width:15.5em;
    line-height:40px;
  }
  .cube-toast.cube-popup {
    z-index: 10000!important;
  }
  .switch-btn .cube-switch .cube-switch-input{
    width:80px;
    height:46px;
  }
  .switch-btn .cube-switch .cube-switch-input:checked+.cube-switch-ui {
    border-color: #5872f1;
    background-color: #5872f1;
  }
  .switch-btn .cube-switch .cube-switch-ui {
    position: relative;
    display: block;
    width:80px;
    height:46px;
    box-sizing: content-box;
    border: 1px solid #e4e4e4;
    border-radius: 46px;
    background-color: #e4e4e4;
  }
  .switch-btn .cube-switch .cube-switch-ui:after, .switch-btn  .cube-switch .cube-switch-ui:before{
    border-radius: 46px;
  }
  .switch-btn .cube-switch .cube-switch-ui:after {
    width: 46px;
  }
  .switch-btn .cube-switch .cube-switch-input:checked+.cube-switch-ui:after {
    -webkit-transform: translateX(38px);
    transform: translateX(38px);
  }
</style>
